<template>
  <div :class="['playPage',{paused:paused}]">
    <!-- @timeupdate="timeupdate"  播放的时间更新事件
      @play="play"    播放事件
      @pause="pause"   暂停事件
    @ended='playEnd'  播放完成事件-->
    <audio
      v-if="playMusice"
      autoplay
      :src="`https://music.163.com/song/media/outer/url?id=${playMusice.id}.mp3`"
      @timeupdate="timeupdate"
      @play="play"
      @pause="pause"
      @ended="playEnd"
      ref="player"
    ></audio>

    <transition>
      <div class="miniBar" v-if="playMusice" v-show="!isFull">
        <div class="lucency">
          <div class="saucer" v-if="playMusice">
            <img :src="playMusice.picUrl" width="50" height="50" />
          </div>
        </div>
        <p @click="isFull=true">{{playMusice.name}}-{{playMusice.artists[0].name}}</p>
        <div class="progress">
          <canvas width="50" height="50" ref="miniPlay"></canvas>
          <span class="state" @click="togglePlay"></span>
        </div>
      </div>
    </transition>

    <transition>
      <div class="fullScreen" v-show="isFull" v-if="playMusice">
        <div class="bgss" :style="`backgroundImage:url(${playMusice.picUrl})`">
          <div class="mc"></div>
        </div>
        <div class="top">
          <ul>
            <li class="back" @click="isFull=false">
              <!-- <img :src="imgUrll" alt /> -->
              <span></span>
            </li>
            <li class="singer">
              <p>{{playMusice.name}}</p>
              <p class="mint">{{playMusice.artists[0].name}}</p>
            </li>
          </ul>
        </div>
        <div class="content">
          <!-- @click="toggledisplay" v-show="true" -->
          <div class="clickdis" @click="isdisplay=true" v-show="!isdisplay">
            <!-- ref="displayer" @block="block" @nones="nones" -->
            <div class="tone">
              <div></div>
            </div>
            <div class="plate">
              <div class="blackpla">
                <img />
              </div>
              <div class="minpla" v-if="playMusice">
                <img :src="playMusice.picUrl" alt />
              </div>
            </div>
          </div>

          <div class="lyric" @click="isdisplay=false" v-show="isdisplay">
            <!-- @click="toggledisplay" v-show="false" -->
            <ul :style="`transform:translateY(-${top}px)`">
              <li
                v-for="(ly,index) in lyric"
                :key="index"
                :class="{active:index==lyricIndex}"
                ref="sb"
              >{{ly.lyric}}</li>
            </ul>
          </div>
        </div>

        <div class="control">
          <!-- 自定义播放进度条 -->
          <div class="progressbar" v-if="duration">
            <span class="currentime">{{presentime|format_Time}}</span>
            <input type="range" max="100" v-model="timeRange" @change="changeTime" />
            <span class="totletime">{{duration|format_Time}}</span>
          </div>
          <!-- <button @click="playMode='circle'">单曲循环</button>
        <button @click="playMode='list'">列表循环</button>
          <button @click="playMode='rand'">随机播放</button>-->
          <div class="btnclick">
            <button :class="['circulation','iconfont',playname]" @click="playorder"></button>
            <button class="on_a" @click="prevMusic"></button>
            <button class="playzan" @click="togglePlay"></button>
            <button class="next_a" @click="nextMusic"></button>
            <button class="songmenubtn" @click="songmenu_state=true" v-show="!songmenu_state"></button>
          </div>

          <!-- <button>歌单</button> -->
        </div>
        <div class="songmenumc" @click="songmenu_state=false" v-show="songmenu_state"></div>
        <div class="songmenu" v-show="songmenu_state">
          <div class="songbox">
            <div class="songmenu_top">
              <p>当前播放</p>
            </div>
            <div class="series">
              <span><i :class="['circulation','iconfont',playname]"></i>{{pattern}}</span>
            </div>
            <ul>
              <li
                v-for="(item,index) in musicList"
                :key="index"
                :style="{color:item.id==playMusice.id?'red':'#303030'}"
                
              >
              <!-- @click="playMusice.id=item.id" -->
                <Loading class="donhua" v-show="item.id==playMusice.id"></Loading>
                <p class="musicbiao">{{item.name}} -- {{item.artists[0].name}}</p>
                <i class="del iconfont icon-shanchuguanbiquxiaowubiankuang"></i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </transition>
    <!-- <div class="playlist">
      <p v-for="item in musicList" :key="item.id">{{item.name}}</p>
    </div>-->
  </div>
</template>

<script>
import Loading from "@/components/Loading";
export default {
  name: "Play",

  props: {
    playMusice: {
      type: Object,
      default: function () {
        return null;
      },
    },
    musicList: Array,
  },

  filters: {
    //时间格式化
    format_Time(val) {
      let date = new Date(val * 1000);
      let m = date.getMinutes();
      let s = date.getSeconds();
      m = m > 9 ? m : "0" + m;
      s = s > 9 ? s : "0" + s;
      return `${m}:${s}`;
    },
  },
  watch: {
    // computed watch filters 区别作用。。。
    playMusice(value) {
      this.$http
        .get("http://music.kele8.cn/lyric", {
          params: { id: value.id },
        })
        .then((d) => {
          let lyric = d.data.lrc.lyric;
          let lyricArry = lyric.split("\n");
          lyricArry.pop();
          let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
          for (let i = 0; i < lyricArry.length; i++) {
            let regex = new RegExp(reg);
            if (regex.test(lyricArry[i])) {
              // console.log(parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2));
              let item = {
                time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
                lyric: RegExp.$3,
              };
              this.lyric.push(item);
            }
          }
        });
    },
  },
  components:{
    Loading
  },
  data() {
    return {
      // musicID:0, //播放音乐的ID
      paused: false,//是否暂停
      isFull: false,//播放条是否点击
      isdisplay: false,
      songmenu_state: false,//菜单状态
      lyric: [],//存放歌词的数组
      lyricIndex: 0,
      top: 0,
      timeRange: 0,
      presentime: 0,
      duration: 0,
      playMode: "0", //单曲循环circle 随机播放 rand 列表循环list
      playname: "icon-xunhuan",
      pattern:'列表循环',
      Loading,//加载图标
    };
  },
  methods: {
    playorder() {
      console.log(this.playMode);
      this.playMode = parseInt(this.playMode) + 1;
      console.log("加之后的num", this.playMode);
      if (this.playMode == 0) {
        this.playname = "icon-xunhuan";
        this.pattern='列表循环';
        console.log("现在是顺序播放");
      } else if (this.playMode == 1) {
        this.playname = "icon-suijibofang";
        this.pattern='随机播放';
        console.log("现在是随机播放");
      } else if (this.playMode == 2) {
        this.playname = "icon-hanhan-01-01";
        this.pattern='单曲循环';
        console.log("现在是单曲循环");
      } else {
        this.playMode = 0;
        this.playname = "icon-xunhuan";
      }
      console.log("判定完之后的num", this.playMode);
    },
    playEnd() {
      // this.playMode=this.playMode+1;
      if (this.playMode == "0") {
        //顺序播放 继续播放
        this.nextMusic();
      } else if (this.playMode == "1") {
        //随机播放
        let randIndex = Math.floor(Math.random() * this.musicList.length);
        let randMusic = this.musicList[randIndex];
        this.$emit("play", randMusic);
      } else {
        //单曲循环 下一曲
        this.$refs.player.play();
      }
    },
    prevMusic() {
      let playID = this.playMusice.id;
      let prevMusic = null;
      this.musicList.filter((d, index) => {
        if (d.id == playID) {
          //找到当前播放音乐
          let i = --index; //上一曲
          if (i < 0) i = this.musicList.length - 1; //判断如果上一曲的下标是-1 去到最后一曲
          prevMusic = this.musicList[i];
        }
      });
      this.$emit("play", prevMusic);
    },
    nextMusic() {
      let playID = this.playMusice.id;
      let nextMusic = null;
      this.musicList.filter((d, index) => {
        if (d.id == playID) {
          //找到当前播放音乐
          // 判断是否为随机播放 是的话下一曲就是随机播放的
          if (this.playMode == 1) {
            let randIndex = Math.floor(Math.random() * this.musicList.length);
            let randMusic = this.musicList[randIndex];
            // this.$emit("play", randMusic);
             nextMusic = randMusic;
            console.log('是随机播放的');
          } else {
            let i = ++index; //下一曲
            if (i > this.musicList.length - 1) i = 0; //判断如果下一曲的下标是大于歌单长度 就去到第一首
            nextMusic = this.musicList[i];
          }
        }
      });
      this.$emit("play", nextMusic);
    },

    pause() {
      this.paused = true;
    },
    play() {
      this.paused = false;
    },
    togglePlay() {
      //切换播放状态
      let player = this.$refs.player; //audio
      if (this.paused) {
        player.play(); //调用audio播放器 播放函数
      } else {
        player.pause(); //调用audio播放器 暂停函数
      }
    },

    //拖动进度条
    changeTime(e) {
      let val = e.target.value;
      let player = this.$refs.player;
      let ctime = (val / 100) * this.duration;
      // console.log(ctime, "11111111111" + player);
      player.currentTime = ctime;
    },
    // 歌词高度
    timeupdate(e) {
      let audio = e.target;
      let currentTime = audio.currentTime; //获取当前播放时间
      let duration = audio.duration; //获取总播放时间
      this.duration = duration;
      // console.log(currentTime, duration);
      this.drawCircle(currentTime, duration);
      // let timeRange=this.$refs.timeRange;
      this.timeRange = (currentTime / duration) * 100;

      // 当前时间 presentime
      this.presentime = Math.floor(currentTime);
      // console.log("当前时间-------", this.presentime);

      // 总时间
      // this.alltime = Math.floor(duration);
      // console.log("总时间-------", this.duration);
      for (var i = 0; i < this.lyric.length; i++) {
        if (i == this.lyric.length - 1) {
          this.lyricIndex = i;
          break;
        }
        if (
          currentTime >= this.lyric[i].time &&
          currentTime < this.lyric[i + 1].time
        ) {
          this.lyricIndex = i;
          break;
        }
      }
      // console.log(currentTime, this.lyric[i].time);
      // console.log(this);
      // console.log(this.$refs.sb[this.lyricIndex]);
      // console.log(this.$refs.sb[this.lyricIndex].offsetTop);
      // console.log("时间", this.lyricIndex);
      // if(isdisplay==true){
      this.top = this.$refs.sb[this.lyricIndex].offsetTop + 20;
      // }
    },
    drawCircle(currentTime, duration) {
      let canvas = this.$refs.miniPlay;
      let context = canvas.getContext("2d");
      context.clearRect(0, 0, 50, 50); //清除画布上面的内容
      context.beginPath();
      context.strokeStyle = "rgb(229,229,229)";
      context.lineWidth = 2; //线宽度
      context.arc(25, 25, 20, 0, 2 * Math.PI);
      context.stroke();
      context.closePath();
      let arcp = (currentTime / duration) * 2 * Math.PI;
      context.beginPath();
      context.strokeStyle = "rgb(80,80,80)";
      context.lineWidth = 2; //线宽度
      context.arc(25, 25, 20, 0, arcp);
      context.stroke();
      context.closePath();
    },
  },
};
</script>
<style lang="less" scoped>
.playPage {
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding: 2px 0px 0px 0px;
  background-color: #ffff;
  z-index: 99;
  .miniBar {
    border-top: 1px solid #f4f4f4;
    display: flex;
    padding: 0px 10px;
    height: 4rem;
    align-items: center;
    position: relative;
    // animation: full 0.5s forwards;
    .lucency {
      position: absolute;
      background: url(../assets/images/1.png) no-repeat;
      //    background-color: red;
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      top: -1.2rem;
    }
    .saucer {
      position: absolute;
      background: url(../assets/images/2.png) no-repeat center;
      z-index: 2;
      width: 4.2rem;
      height: 4.2rem;
      border-radius: 50%;
      top: 0.1rem;
      left: 0.1rem;
      background-color: black;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0px;
      bottom: 0px;
      margin: auto;
      // border: 1px solid black;
      width: 2.6rem;
      height: 2.6rem;
      border-radius: 50%;
    }
    p {
      margin-left: 7rem;
      width: 20rem;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    div {
      width: 3.3rem;
      height: 3.3rem;
    }
    .progress {
      position: relative;
      .state {
        width: 3.3rem;
        height: 3.3rem;
      }
      .state::after {
        content: "";
        width: 3.3rem;
        height: 3.3rem;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        position: absolute;
        background: url(../assets/icon_yyb30nhgva/Pause.png) no-repeat center;
        background-size: 50%;
      }
    }
    .progress canvas {
      position: absolute;
      transform: rotate(-90deg);
      width: 2.6rem;
      height: 2.6rem;
      left: 0px;
      right: 0px;
      top: 0px;
      bottom: 0px;
      margin: auto;
    }
  }
}
.paused {
  // color: red;
  .miniBar {
    display: flex;
    // padding: 0px 10px;
    position: fixed;
    width: 100%;
    bottom: 0px;
    border-top: 1px solid #f6f6f6;
    background-color: #ffff;
    align-items: center;
    z-index: 8;

    img {
      animation-play-state: paused;
    }
    .progress {
      .state::after {
        background: url(../assets/icon_yyb30nhgva/play.png) no-repeat center;
        background-size: 35%;
        margin-left: 1px;
        margin-bottom: 1px;
      }
    }
  }
  .fullScreen .control .playzan {
    background: url(../assets/images/bofang.png) no-repeat center;
    background-size: 100%;
  }
  .fullScreen .content .plate {
    animation-play-state: paused;
  }
  .fullScreen .content .tone div {
    animation: micrometastasis 3s forwards;
  }
}
.fullScreen {
  position: fixed;
  width: 100%;
  background-color: #ffff;
  background-position: center;
  height: 100vh;
  bottom: 0px;
  // filter: blur(10px);
  // background-color: rgb(155, 152, 152);
  z-index: 9;
  // animation: full 0.5s forwards;
  .mc {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.4);
    top: 0px;
  }
  .bgss {
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    position: absolute;
    overflow: hidden;
    filter: blur(18px);
    top: 0px;
    // background-image: url();
  }

  .top {
    height: 50px;
    width: 100%;
    position: absolute;
    top: 0px;
    z-index: 9;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    ul {
      height: 50px;
      display: flex;
    }
    li {
      height: 50px;
      // margin-top: 10px;
      // flex: 0.5;
      float: left;
    }
    .back {
      width: 50px;
      height: 50px;
      position: relative;
      // background-color: #ffff;

      span {
        display: inline-block;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 20px;
        height: 20px;
        background-image: url(../assets/images/xiangxia.png);
        background-size: 100%;
        // background: red;
      }
    }
    .singer {
      text-align: center;
      position: absolute;
      top: 6px;
      right: 0px;
      left: 0px;
      margin: auto;
      // line-height: 40px;
      // margin-top: 10px;
      flex: 1;
      color: #f4f4f4;
      // margin-right: 20px;
      font-size: 17px;
      // margin-top: 6px;
      width: 250px;
      .mint {
        font-size: 12px;
        // margin-top: 5px;
        color: rgba(255, 255, 255, 0.4);
      }
    }
  }
  .content {
    position: absolute;
    height: 50rem;
    right: 0;
    left: 0;
    margin-bottom: 10rem;
    .tone {
      width: 25%;
      margin: auto;
      border: 0px;
      height: 11rem;
      div {
        position: absolute;
        top: 6.6rem;
        right: 0px;
        left: 0px;
        z-index: 2;
        margin: auto;
        width: 6rem;
        height: 11rem;
        transform-origin: left top;
        transform: translate(32%) rotate(-3deg);
        background: url(../assets/images/canbi.png)
          no-repeat;
        background-size: 100%;
        animation: play 1s forwards;
      }
    }
    .lyric {
      width: 100%;
      height: 52vh;
      left: 0;
      right: 0;
      overflow: hidden;
      position: absolute;
      top: 12rem;
      margin: auto;
      -webkit-mask: -webkit-linear-gradient(
        top,
        #000000,
        #000000 70%,
        rgba(0, 0, 0, 0)
      );

      ul {
        position: absolute;
        top: 20vh;
        width: 100%;
        list-style: none;
        transition: transform 0.5s;
      }
      ul li {
        text-align: center;
        // position: absolute;
        // height: 20px;
        margin: 10px 0px;
        font-size: 1.1rem;
        transition: transform 0.5s;
        // font-size: 1rem;
        color: #f4f4f4;
      }
      ul li.active {
        transform: scale(1.5);
        color: deeppink;
      }
    }
    .plate {
      position: relative;
      width: 20rem;
      height: 20rem;
      margin: 1rem auto;
      animation: whirl 8s linear 0s infinite;
      .blackpla img {
        background: url(https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4602256867/5855/63fb/325b/d7e4e3a244701ee85fecb5d4f6b5bd57.png?imageView=&quality=75&thumbnail=200y200)
          no-repeat center;
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0;
        top: 0;
        margin: auto;
        width: 20rem;
        height: 20rem;
        border-radius: 50%;
        z-index: 10;
        background-size: 100%;
      }
      .minpla {
        img {
          background: url('../assets/images/3.png');
          position: absolute;
          left: 0px;
          right: 0px;
          bottom: 0;
          top: 0;
          margin: auto;
          width: 15rem;
          height: 15rem;
          border-radius: 50%;
        }
      }
    }
  }
}
.control {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0px;
  text-align: center;
  margin: auto;
  margin-bottom: 2rem;

  // 循环变背景
  button {
    outline: none;
    border: 0px;
    width: 5rem;
    height: 5rem;
    margin: 10px;
    text-align: center;
    line-height: 5rem;
    font-size: 25px;
    color: #ffff;
  }
  .btnclick {
    display: flex;
    justify-content: center;
  }
  .circulation {
    // background: url(../assets/images/xunhuanbofang.png) no-repeat center;
    // background-size: 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #0000;
    font-size: 2rem;
    //  background-color: ;
  }
  .on_a {
    background: url(../assets/images/047caozuo_shangyishou.png) no-repeat center;
    background-size: 40%;
  }
  .next_a {
    background: url(../assets/images/048caozuo_xiayishou.png) no-repeat center;
    background-size: 40%;
  }
  .playzan {
    background: url(../assets/images/zanting.png) no-repeat center;
    background-size: 102%;
  }
  .progressbar {
    margin-bottom: 6px;
    line-height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .songmenubtn {
    background: url(../assets/images/gedan.png) no-repeat center;
    background-size: 60%;
  }
  span {
    color: rgba(255, 255, 255, 0.4);
    margin: 5px;
  }
  input[type="range"] {
    width: 68vw;
    height: 1px;
    // margin-bottom: 20px;
  }
}
.songmenumc {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 2;
}
.songmenu {
  width: 34rem;
  height: 60vh;
  position: absolute;
  bottom: 20px;
  right: 0px;
  left: 0px;
  z-index: 3;
  margin: auto;
  border-radius: 25px;
  background-color: #ffffff;
  .songbox {
    padding: 30px 20px 0px 20px;
  }

  .donhua{
    width: 20px;
    height: 30px;
    line-height: 30px;
    margin-top: 6px;
    float: left;
    margin-right: 10px;
    // background-color: red;
  }
  .musicbiao {
    float: left;
  }
  ul li {
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
  .songmenu_top {
    margin-bottom: 10px;
    p {
      font-weight: 600;
      font-size: 19px;
    }
  }
  .series{
    margin-bottom: 10px;
    i{
      display: inline-block;
      width: 50px;
      height: 20px;
      font-size: 20px;
    }
  }
  .del {
    float: right;
    color: #303030;
  }
  p {
    // margin-left: 2rem;
    font-size: 15px;
    // margin-bottom: 20px;
    // margin: ;
  }
}
@keyframes whirl {
  from {
    // transform-origin:left top;
    transform: rotate(0deg);
  }
  to {
    // transform-origin:left top;
    transform: rotate(360deg);
  }
}
@keyframes micrometastasis {
  from {
    transform: translate(32%) rotate(-3deg);
  }
  to {
    transform: translate(32%) rotate(-30deg);
  }
}
@keyframes play {
  from {
    transform: translate(32%) rotate(-30deg);
  }
  to {
    transform: translate(32%) rotate(-3deg);
  }
}

// @keyframes full{

//   0%{
//     transform: translateY(100%);
//     opacity: 0;
//   }
//   100%{
//     transform: translateY(0%);
//     opacity: 1;
//   }
// }
// @keyframes nofull{
//   0%{
//     transform: translateY(0%);
//     opacity: 0;
//   }
//   100%{
//     transform: translateY(100%);
//     opacity: 1;
//   }
// }

.v-enter,
.v-leave-to {
  transform: translateY(100%);
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s;
}
</style>